<!-- 左侧表格 -->
<template>
  <div class="left-table">
    <div class="header">
      <el-radio-group class="redio-group" v-model="radio" size="small" @change="handleOnRadioChange">
        <el-radio-button label="各街镇" value="各街镇" />
        <el-radio-button label="重点平台" value="zdpt" />
        <el-radio-button label="重点业主" value="zdyz" />
        <el-radio-button label="重点项目" value="zdxm" />
      </el-radio-group>
      <div class="buttons">
        <el-button size="small" @click="handleOnExport">导出</el-button>
      </div>
    </div>
    <el-table v-if="radio !== '各街镇'" :data="tableData" style="width: 100%; height: 40vh; overflow-y: auto;">
      <el-table-column prop="key_name" :label="tableIndex" />
      <el-table-column prop="ywlx">
        <template #header>
          <el-select v-model="typeSelect" size="small" placeholder="业务类型" @change="handleOnYwlxChange">
            <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item">
              {{ item }}
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="ra" label="入库（宗）" />
      <el-table-column prop="ca" label="出案（宗）" />
      <el-table-column prop="nsf" label="拟收费（万元）" />
      <el-table-column prop="ysf" label="已收费（万元）" />
    </el-table>
    <div style="width: 100%; height: 100%; position:relative " v-else>
      <el-select style="position: absolute; left: 5px; top: -15px; width: 80px; z-index: 99;" v-model="jzSelect"
        size="small" placeholder="请选择" @change="loadJZData">
        <el-option v-for="item in jzOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <div style="width: 100%; height: 45%; position: relative; overflow-x: auto; overflow-y: hidden;">
        <LeftNumBar :data="jzData" style="width: 130%; height: 100%; margin: 20px 0;" />
      </div>
      <div style="width: 100%; height: 48%; position: relative; overflow-x: auto; overflow-y: hidden;">
        <LeftMoneyBar :data="jzData" style="width: 130%; height: 100%;" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import LeftNumBar from './LeftNumBar.vue';
import LeftMoneyBar from './LeftMoneyBar.vue';
import { exportTownProjectStatsByBusinessPhase } from '@/api/dataApi';
import { getKeyList, getUniqueZj, getProjectIndexForYwlxAndYwhjByTown } from '@/api/screenApi';
import { getGeomByAddress } from '@/api/xzqh';
import { wktStrToGeoJson } from "@/utils/tool";

const props = defineProps({ year: Number });

const tableIndex = computed(() => {
  if (radio.value === 'zdpt') return '重点平台';
  if (radio.value === 'zdyz') return '重点业主';
  if (radio.value === 'zdxm') return '重点项目';
  return radio.value;
});

const radio = ref('各街镇');
const tableData = ref([]);
const typeSelect = ref('全部业务类型');
const typeOptions = ref(['全部业务类型']);

const jzSelect = ref('全部');
const jzOptions = ref(['人和镇', '南和镇', '西坡镇']);

const handleOnYwlxChange = (value) => {
  getKeyList({
    key_name_field: radio.value,
    year: props.year,
    ywlx: value === '全部业务类型' ? '' : value,
  }).then(res => {
    tableData.value = res.data.data;
  })
};

const handleOnRadioChange = (value) => {
  typeSelect.value = '全部业务类型';

  if (value === '各街镇') {
    loadJZData();
  } else {
    getKeyList({
      key_name_field: value,
      year: props.year,
      ywlx: typeSelect.value === '全部业务类型' ? '' : typeSelect.value
    }).then(res => {
      tableData.value = res.data.data;
      typeOptions.value = [...new Set(['全部业务类型', ...res.data.data.map((item) => item.ywlx)])];
    })
  }
}

const handleOnExport = () => {
  exportTownProjectStatsByBusinessPhase({
    townName: jzSelect.value,
    year: props.year,
  }).then(res => {
    const link = document.createElement('a');
    try {
      let blob = new Blob([res.data]);
      let _fileName = `各街镇导出-${jzSelect.value}.xlsx`;
      link.style.display = 'none';
      const url = window.URL || window.webkitURL || window.moxURL;
      link.href = url.createObjectURL(blob);
      console.log(link.href)
      link.setAttribute('download', _fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      url.revokeObjectURL(link.href);//销毁url对象
    }
    catch (e) {
      console.log(e);
    }
  })
}

const jzData = ref([]);
const loadJZData = async () => {
  await getUniqueZj().then(res => {
    jzOptions.value = ['全部', ...res.data.data];
    // jzSelect.value = jzOptions.value[0];
  })
  jiezhenC();
  getProjectIndexForYwlxAndYwhjByTown(props.year, jzSelect.value).then(res => {
    console.log(res, 123);
    if (Array.isArray(res.data.data)) {
      let tempData = res.data.data;
      tempData.forEach(item => {
        item.ywhj = item.ywhj.replace("前期咨询/项目立项", "前期咨询");
      });
      jzData.value = tempData;
    }
  })
}
const jzcsqPlog = ref(null);

const jiezhenC = () => {
  getGeomByAddress({
    name: 'JZ',
    jd: jzSelect.value,
  }).then((res) => {
    if (jzcsqPlog.value) {
      window.screenmap.removeLayer(jzcsqPlog.value);
    }
    // wkt.value = res.data;
    var geo = JSON.parse(wktStrToGeoJson(res.data));
    console.log(geo, "sy11");
    // eslint-disable-next-line no-undef
    var geoJ = L.geoJSON(geo);
    var style = {
      color: "red",
      fillColor: "rgb(123,180,255)",
      fillOpacity: 0.2,
    };
    console.log(geoJ, "sy22");
    // eslint-disable-next-line no-undef
    var pgeo = L.Util.transform(geoJ, GZ2000, L.CRS.EPSG4326);
    console.log(pgeo, "sy33");
    // eslint-disable-next-line no-undef
    jzcsqPlog.value = L.geoJSON(pgeo.features[0].geometry, style).addTo(window.screenmap);
    window.screenmap.fitBounds(jzcsqPlog.value.getBounds());
  });
}
onMounted(() => {
  loadJZData();
})
</script>

<style scoped>
.left-table {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  flex-direction: column;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
}

.buttons {
  display: flex;
  position: absolute;
  right: 10px;
}
</style>
